﻿@page "/buttons"

<h3>Button 按钮</h3>

<h4>常用的操作按钮。</h4>

<Block Title="基础用法" Introduction="基础的按钮用法。">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Primary">主要按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Secondary">次要按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Success">成功按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Danger">危险按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Warning">警告按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Info">信息按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Dark">黑暗按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Light">高亮按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button @onclick="@ButtonClick" Color="Color.Link">链接按钮</Button></div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="不同风格" Introduction="通过设置 <code>ButtonStyle</code> 来显示不同的按钮风格">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">次要按钮</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">成功按钮</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">危险按钮</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">警告按钮</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
            </Button>
        </div>
    </div>
</Block>

<Block Title="Outline 按钮" Introduction='通过设置 <code>IsOutline="true"</code> 设置按钮边框颜色样式。'>
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">主要按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">次要按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">成功按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">危险按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">警告按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">信息按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">黑暗按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">高亮按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">链接按钮</Button></div>
    </div>
</Block>

<Block Title="不同尺寸" Introduction='Button 组件提供除了默认值以外的多种尺寸，通过设置 <code>Size</code> 属性可以在不同场景下选择合适的按钮尺寸。'>
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">超小按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">小按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">中等按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">大按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">超大按钮</Button></div>
        <div class="col-12"><Button IsBlock="true" Color="Color.Primary">Block 按钮</Button></div>
    </div>
</Block>

<Block Title="禁用状态" Introduction="按钮不可用状态。通过设置 <code>IsDisabled</code> 属性">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">主要按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">次要按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">成功按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">危险按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">警告按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">信息按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">黑暗按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">高亮按钮</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">链接按钮</Button></div>
    </div>

    <p class="mt-3">通过 <code>OnClick</code> 回调方法中设置自身 <code>IsDisabled</code> 属性，或者调用组件实例方法 <code>SetDisable</code> 均可实现按钮禁用效果</p>
    <p>由于使用 <code>IsDisabled</code> 属性时，需要显式手动调用 <code>StateHasChanged</code> 方法，会导致按钮所在组件整体刷新，建议使用实例方法 <code>SetDisable</code> 仅对按钮进行刷新</p>

    <p><b>性能比较：</b></p>
    <ul class="ul-demo">
        <li>使用 <code>IsDisabled</code> 属性设置时本页面传输量为 <code>4.8K</code></li>
        <li>使用 <code>SetDisable</code> 方法设置时本页面传输量为 <code>280B</code></li>
    </ul>
    <div class="row g-3">
        <div class="col-12">
            <Button Text="点击被禁用" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
                <Tooltip Title="点击按钮后由于被禁用 Tooltip 被销毁" Placement="Placement.Top" Trigger="hover" />
            </Button>
            <Button Color="Color.Info" Text="点击后使第一个按钮可用" OnClickWithoutRender="@ClickButton2" class="ms-3"></Button>
        </div>
    </div>
</Block>

<Block Title="按钮组" Introduction="由多个按钮组成一个组合按钮">
    <div class="btn-group" role="group">
        <Button Color="Color.Primary">按钮一</Button>
        <Button Color="Color.Success">按钮二</Button>
    </div>
</Block>

<Block Title="带图标的按钮" Introduction="通过设置 <code>Icon</code> 属性对按钮图标进行设置，图标为字体字符串如使用 <code>font-awesome</code> 图标时 <code>fa fa-fa</code>">
    <div class="row g-3">
        <div class="col-auto">
            <Button Color="Color.Primary" Icon="fa fa-fa" Text="状态按钮"></Button>
        </div>
        <div class="col-auto">
            <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="进度按钮"></Button>
        </div>
    </div>
</Block>

<Block Title="二次封装按钮" Introduction="通过设置 <code>WinButton</code> 组件的 <code>Text</code> 属性对按钮显示文字进行设置，点击按钮是右侧显示被点击按钮的文字">
    <div class="row g-3">
        <div class="col-auto">
            <WinButton Text="按钮一" OnClick="@ClickButtonShowText"></WinButton>
        </div>
        <div class="col-auto">
            <WinButton Text="按钮二" OnClick="@ClickButtonShowText"></WinButton>
        </div>
        <div class="col-auto">
            @ButtonText
        </div>
    </div>
</Block>

<Block Title="异步请求按钮" Introduction="通过设置 <code>IsAsync</code> 属性按钮是否为 <b>异步请求按钮</b>，默认为 <code>false</code>">
    <p>当按钮为异步请求按钮时，点击按钮后自身状态会改变为禁用状态，同时显示 <code>Loading</code> 小图标，异步请求结束后恢复正常，本例中点击 <b>异步请求</b>按钮后，显示请求加载动画，5 秒后恢复正常</p>
    <Button Text="异步请求" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

<MethodTable Items="@GetMethods()" />
